<template>
    <div id="headernav">
        <nav>
            <div class="logo">
                <img src="../assets/image/logo.png" alt="" @click="toindex()">
            </div>
            <!-- 右边导航栏 -->
            <ul class="navul">
                <li>
                    <router-link to="/" exact>首页</router-link>
                </li>
                <li>
                    <router-link to="/report">证书报告</router-link>
                </li>
                <li>
                    <router-link to="/manufacturer">生产厂家</router-link>
                </li>
                <li>
                    <router-link to="/contact">联系我们</router-link>
                </li>
            </ul>
        </nav>
    </div>
</template>

<script>
export default {
    name:'headernav',
    data(){
        return{
           nav:""
        }
    },
    methods:{
        toindex(){
            this.$router.push('/')
        }
    }
}
</script>

<style>
#headernav{
    z-index: 10;
    /* height: 4rem; */
}
nav{
    display: flex;
    justify-content: space-around;
    background-color: black;
    color: white;
    padding-top: 1rem;
    /* padding-bottom: 0.5rem; */
    box-sizing: border-box;
    font-size: 0.8rem;
}
.logo img{
    width: 3.5rem;
    height: 3.5rem;
    cursor: pointer;
}
.logo::after{
    content: "墨泥一下，轻松学车";
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 1rem;
    margin-left: 1rem;
    font-size: 0.8rem;
}
.navul{
    display: flex;
    align-items: center;
    justify-content:center;
    flex-wrap: wrap;
}
.navul li{
    list-style: none;
    cursor: pointer;
    height: 1.5rem;
    box-sizing: border-box;
    margin-right: 2rem;
}
li>a{
    text-decoration: none;
    font-size: 0.8rem;
    color: white;
}
.navul li::after{
    content:"";
    position: absolute;
    left: 0;
    border-bottom: 2px solid white;
}
/* .navul li:not(.is-active):hover{
    border-bottom: 2px solid white;
}
.active{
    border-bottom: 2px solid white;
} */
.navul li:nth-of-type(1)::before{
    content: '';
    display: inline-block;
    vertical-align: sub;
    width: 1.1rem;
    height: 1.1rem;
    background: url("../assets/image/index/index.png");
    background-size: 100% 100%;
}
.router-link-active{
    border-bottom: 2px solid white;
}

.navul li:nth-of-type(2)::before{
    content: '';
    display: inline-block;
    vertical-align: sub;
    width: 1.1rem;
    height: 1.1rem;
    background: url("../assets/image/index/report.png");
    background-size: 100% 100%;
}
.navul li:nth-of-type(3)::before{
    content: '';
    display: inline-block;
    vertical-align: sub;
    width: 1.1rem;
    height: 1.1rem;
    background: url("../assets/image/index/user.png");
    background-size: 100% 100%;
}
.navul li:nth-of-type(4)::before{
    content: '';
    display: inline-block;
    vertical-align: sub;
    width: 1.1rem;
    height: 1.1rem;
    background: url("../assets/image/index/tel.png");
    background-size: 100% 100%;
}
.touming{
    background-color: rgba(1, 1, 1, 0.7);
}
</style>